@mixin linearBgOpacity($deg, $color1, $color1Opa: 1, $color1P, $color2, $color2Opa, $color2P) {
  background: linear-gradient($deg, rgba($color1, $color1Opa) $color1P, rgba($color2, $color2Opa) $color2P);
}

@mixin colorOpa($colorType, $color, $opacity: 1) {
	#{$colorType}: rgba($color, $opacity)
}

@mixin shadowOpa($shadows, $color, $opacity: 1) {
	box-shadow: $shadows rgba($color, $opacity);
}
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  @content;
}

@mixin flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
@mixin flex-column($gap: 0) {
  display: flex;
  flex-direction: column;
  gap: $gap + px;
}

@mixin transitionStyle($property: all, $duration: 0.3s, $timing: ease-in-out) {
  transition: $property $duration $timing;
}

@mixin transitionMixinZoomInBottom($old, $name) {
  .#{$name}-zoom-in-bottom-enter-active,
  .#{$name}-zoom-in-bottom-leave-active {
    opacity: 1;
    transform: $old scaleY(1);
    transition: transform 0.3s ease-in-out;
    transform-origin: center bottom;
  }
  .#{$name}-zoom-in-bottom-enter-from,
  .#{$name}-zoom-in-bottom-leave-to {
    opacity: 0;
    transform: $old scaleY(0);
  }
}

@mixin transitionMixinZoomInTop($old, $name) {
  .#{$name}-zoom-in-top-enter-active,
  .#{$name}-zoom-in-top-leave-active {
    opacity: 1;
    transform: $old scaleY(1);
    transition: transform 0.3s ease-in-out;
    transform-origin: center top;
  }
  .#{$name}-zoom-in-top-enter-from,
  .#{$name}-zoom-in-top-leave-to {
    opacity: 0;
    transform: $old scaleY(0);
  }
}
